<template>
  <h1>El-组件</h1>
  <el-switch v-model="value1"></el-switch>
  <el-switch
      v-model="value2"
      style="--el-switch-on-color: green; --el-switch-off-color: red"
  />
  <br>
  <el-switch v-model="inShow"></el-switch>
  <hr>
  <img src="https://img2.baidu.com/it/u=793173674,3413416703&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" width="200px" v-if="inShow">
  <hr>
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="numStr" :active-value="'1'" :inactive-value="'0'"></el-switch>
  <el-switch v-model="numStr" active-value="1" inactive-value="0"></el-switch>
</template>

<script setup>
  import {ref} from "vue";

  const num = ref(0);
  const numStr = ref('0');

  const value1 = ref(false);
  const value2 = ref(true);
  const inShow = ref(true);
</script>


<style scoped>

</style>